<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<title>Mozilla Tests: Background Position</title>
  <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
  <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/background/bg-pos-1.html"/>
  <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background" />
<STYLE type="text/css">
   P { font-size: 36px; margin-top: 0; line-height: 1.2; }
   SPAN { background: #EEEEEE url(/resources/images/bullet) no-repeat; border: solid thin teal; }
   .big SPAN { background: #EEEEEE url(/resources/images/big-wasp) repeat; border: solid thin teal; }
   .top.left SPAN { background-position: top left; }
   .bottom.left SPAN { background-position: bottom left; }
   .top.right SPAN { background-position: top right; }
   .bottom.right SPAN { background-position: bottom right; }
   .odd SPAN { background-position: 23% .25em; }
   .center SPAN { background-position: center center; }
   .test SPAN { background-position: 5px 50%; padding-left: 20px; }
</STYLE>

<H1>background-position</H1>

<h2> Small Image </h2>

<div class="small">
<div class="top left">

<PRE>SPAN { background-position: top left } </PRE>

<P>
   This is <SPAN>some text</SPAN> isn't it <SPAN>lovely</SPAN>.
   <SPAN>Please say yes or I will get upset.</SPAN> This is a
   <SPAN>very very very very very very very very very very very very
   very very very very very very very very very very very very very
   very very long sentence</SPAN>.
</P>

</div>

<div class="center center">

<PRE>SPAN { background-position: center center } </PRE>

<P>
   This is <SPAN>some text</SPAN> isn't it <SPAN>lovely</SPAN>.
   <SPAN>Please say yes or I will get upset.</SPAN> This is a
   <SPAN>very very very very very very very very very very very very
   very very very very very very very very very very very very very
   very very long sentence</SPAN>.
</P>

</div>

<div class="bottom right">

<PRE>SPAN { background-position: bottom right } </PRE>

<P>
   This is <SPAN>some text</SPAN> isn't it <SPAN>lovely</SPAN>.
   <SPAN>Please say yes or I will get upset.</SPAN> This is a
   <SPAN>very very very very very very very very very very very very
   very very very very very very very very very very very very very
   very very long sentence</SPAN>.
</P>

</div>

<div class="odd">

<PRE>SPAN { background-position: 23% .25em } </PRE>

<P>
   This is <SPAN>some text</SPAN> isn't it <SPAN>lovely</SPAN>.
   <SPAN>Please say yes or I will get upset.</SPAN> This is a
   <SPAN>very very very very very very very very very very very very
   very very very very very very very very very very very very very
   very very long sentence</SPAN>.
</P>

</div>
</div>

<h2> Big Image </h2>

<div class="big">
<div class="top left">

<PRE>SPAN { background-position: top left } </PRE>

<P>
   This is <SPAN>some text</SPAN> isn't it <SPAN>lovely</SPAN>.
   <SPAN>Please say yes or I will get upset.</SPAN> This is a
   <SPAN>very very very very very very very very very very very very
   very very very very very very very very very very very very very
   very very long sentence</SPAN>.
</P>

</div>

<div class="center center">

<PRE>SPAN { background-position: center center } </PRE>

<P>
   This is <SPAN>some text</SPAN> isn't it <SPAN>lovely</SPAN>.
   <SPAN>Please say yes or I will get upset.</SPAN> This is a
   <SPAN>very very very very very very very very very very very very
   very very very very very very very very very very very very very
   very very long sentence</SPAN>.
</P>

</div>

<div class="bottom right">

<PRE>SPAN { background-position: bottom right } </PRE>

<P>
   This is <SPAN>some text</SPAN> isn't it <SPAN>lovely</SPAN>.
   <SPAN>Please say yes or I will get upset.</SPAN> This is a
   <SPAN>very very very very very very very very very very very very
   very very very very very very very very very very very very very
   very very long sentence</SPAN>.
</P>

</div>

<div class="odd">

<PRE>SPAN { background-position: 23% .25em } </PRE>

<P>
   This is <SPAN>some text</SPAN> isn't it <SPAN>lovely</SPAN>.
   <SPAN>Please say yes or I will get upset.</SPAN> This is a
   <SPAN>very very very very very very very very very very very very
   very very very very very very very very very very very very very
   very very long sentence</SPAN>.
</P>

</div>
</div>

<h2> Test </h2>

<div class="test">

<PRE>SPAN { background-position: 5px 50%; padding-left: 20px; } </PRE>

<P>
   This is <SPAN>some text</SPAN> isn't it <SPAN>lovely</SPAN>.
   <SPAN>Please say yes or I will get upset.</SPAN> This is a
   <SPAN>very very very very very very very very very very very very
   very very very very very very very very very very very very very
   very very long sentence</SPAN>.
</P>

</div>
